<template>
    <div>
        <hd-tab :tabs="tabs"/>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>批量生成</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="商户选择">
                    <hd-alert :alert="{type:'success'}">商户名：{{ form.user_name }}</hd-alert>
                    <hd-userSelect v-model="form" @update="updateuser">
                        选择
                    </hd-userSelect>
                </el-form-item>
                <el-form-item label="卡券数量">
                    <el-input-number v-model="form.number" :min="0" :step="1" size="mini"
                                     step-strictly></el-input-number>
                    <span>当前金额：{{ amount }}元券</span>
                    <template>
                        <el-alert
                            description="单位1表示生成1张面额为100，以此类推，卡券到期时间为生成日后6个月"
                            title="生成规则"
                            type="success">
                        </el-alert>
                    </template>

                </el-form-item>
                <el-form-item label="活动名称">
                    <el-input v-model="form.description" row="5" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onSubmit">一键生成</el-button>
        </el-card>

    </div>
</template>

<script>
import tabs from './tabs'

const form = {
    user_id: '', user_name: '', number: 0
}
export default {
    route: {path: 'voucher/patch', meta: {title: '批量生成'}},
    data() {
        return {
            tabs,
            form,
            amount: 0
        }
    },
    watch: {
        'form.number'(n, o) {
            this.amount = n * 100
        }
    },
    methods: {
        updateuser(user) {
            this.form.user_name = user.name
            this.form.user_id = user.id
        },
        onSubmit() {
            if (!this.form.user_name || this.form.number == 0) {
                this.$alert('请选择商户，并添加卡券数量', '警告', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    }
                });
            } else {
                this.$confirm(`确定为商户：【${form.user_name}】批量生成卡券吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await this.axios.post(`admin/voucher/patch`, this.form)
                    this.$router.push({name: 'admin.voucher.index'});

                })
            }

        }
    }
}
</script>

<style scoped>

</style>
